<template>
  <div class="module-inner common-module-bg">
    <div id="container-deviceInformation" ref="container" class="content"/>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'DeviceInformation',
  components: {},
  props: {
    moduleData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      charts: null,
      echarts: null
    }
  },
  watch: {
    'moduleData.length'() {
      this.setIntervalAuploy()
    }
  },
  mounted() {
    // this.init()
    // this.setIntervalAuploy()
  },
  beforeDestroy() {
    echarts.dispose(this.charts)
    this.charts = null
  },
  methods: {
    init(arr) {
      const chartData = arr.reduce(
        (cur, item) => {
          return {
            enterprise: [...cur.enterprise, item.enterprise],
            devicesCount: [...cur.devicesCount, item.devicesCount],
            serviceLength: [...cur.serviceLength, item.serviceLength]
          }
        },
        {
          enterprise: [],
          devicesCount: [],
          serviceLength: []
        }
      )
      const options = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          left: this.$fontSize(0.05),
          right: this.$fontSize(0.1),
          bottom: 0,
          top: this.$fontSize(0.4),
          containLabel: true
        },
        legend: {
          show: true,
          data: ['设备数量', '服务年限'],
          top: this.$fontSize(0.01),
          itemHeight: this.$fontSize(0.1),
          itemWidth: this.$fontSize(0.2),
          textStyle: {
            color: '#fff',
            fontSize: this.$fontSize(0.1)
          }
        },
        xAxis: [
          {
            type: 'category',
            data: chartData.enterprise,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              interval: 'auto',
              rotate: -35,
              textStyle: {
                color: '#fff',
                fontSize: this.$fontSize(0.1)
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            // name: 'Precipitation',
            min: 0,
            // interval: 400,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#fff',
                fontSize: this.$fontSize(0.1)
              }
            }
          },
          {
            type: 'value',
            // name: 'Temperature',
            min: 0,
            interval: 10,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#fff',
                fontSize: this.$fontSize(0.1)
              }
            }
          }
        ],
        series: [
          {
            name: '设备数量',
            type: 'bar',
            data: chartData.devicesCount,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: 'rgb(141, 225, 155)'},
                {offset: 1, color: 'rgb(98, 166, 239)'}
              ])
            },
            emphasis: {
              itemStyle: {
                borderWidth: 2,
                borderColor: '#fff'
              }
            },
            label: {
              show: true,
              fontSize: this.$fontSize(0.1),
              position: 'top'
            }
          },
          {
            name: '服务年限',
            type: 'line',
            yAxisIndex: 1,
            data: chartData.serviceLength,
            itemStyle: {
              normal: {
                color: '#8cd5c2', // 改变折线点的颜色
                lineStyle: {
                  color: '#3cadff' // 改变折线颜色
                }
              }
            }
          }
        ]
      }
      !this.echarts ? this.echarts = echarts.init(this.$refs.container, null, {renderer: 'svg'}) : false
      // this.charts.showLoading({
      //   text: '',
      //   color: 'rgb(79, 142, 195)',
      //   textColor: '#000',
      //   maskColor: 'rgba(255, 255, 255, 0)',
      //   zlevel: 10
      // })
      this.echarts.setOption(options, true)
      this.charts = {
        resize: this.echarts.resize
      }
      // setTimeout(() => {
      //   this.charts.hideLoading()
      // }, 1000)
    },
    setIntervalAuploy() {
      let index = 0
      this.time = setInterval( ()=> {
        index >= this.moduleData.length ? index = 6 : index += 6
        let arr = this.moduleData.slice(index-6, index);
        this.init(arr)
      }, 5000);

    }
  }
}
</script>

<style lang="scss" scoped>
@import "src/styles/conversion.scss";

.module-inner {
  height: 100%;
  background: url("/images/databoard/module-content.png") no-repeat center;
  background-size: 100% 100%;

  .content {
    width: 100%;
    height: 100%;
  }
}
</style>
